<template>
	<view class="uni-main">
		<use-table ref="tbl"></use-table>
		<div class="container padding_b_0">
			<div class="dflex_wrap">
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">使用类型：</div>
					<el-input v-model="req.way" placeholder="请输入使用类型" class="search_input" @change="search" clearable>
					</el-input>
				</div>
				<div class="dflex_vertical_c margin_r_40 margin_b_20" v-if="advancedSearch">
					<div class="search_name">类型：</div>
					<el-input v-model="req.type" placeholder="请输入类型" class="search_input" @change="search" clearable>
					</el-input>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_b_20 margin_r_40"
					@click="search">搜索</el-button>
				<div class="search_advanced margin_b_20" @click="advancedSearch = !advancedSearch"
					v-if="!advancedSearch">高级筛选</div>
				<div class="search_common margin_b_20" @click="advancedSearch = !advancedSearch" v-if="advancedSearch">
					常用筛选</div>
			</div>
		</div>
		<div style="padding: 20px;">余额:
			<text style="color: red;">{{balance}}元</text>
			<el-button style="margin-left: 20px;padding: 10px;" size="mini" @click="chongzhi">立即充值</el-button>
		</div>
		<div class="container last_container use-table">

			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row>
				<el-table-column property="name" label="名称" align="center"></el-table-column>
				<el-table-column property="way" label="使用类别" align="center"></el-table-column>
				<el-table-column property="type" label="类型" align="center"></el-table-column>
				<el-table-column property="trade_no" label="订单号" align="center"></el-table-column>
				<el-table-column property="money" label="金额" align="center"></el-table-column>
				</el-table-column>
				<el-table-column label="创建时间" align="center" width="200">
					<template scope="scope">
						<uni-dateformat :date="scope.row.create_time" :format="'yyyy-MM-dd hh:mm:ss'" />
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
			<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
				layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
				@current-change="currentChange"></el-pagination>
			<el-dialog class="icon_dialog" width="60%" title="充值" :visible.sync="chongzhiDialog" :append-to-body="true"
				v-dialogDrag>
				<!-- <div>
					<div v-for="(item,index) in chongzhiData" :key="index" @click="selectMoney"
						style="cursor: pointer; width: 20%;height: 80px;line-height:80px;text-align: center;border: 1px solid #ddd;float: left;margin-left: 1%;">
						{{item.text}}
					</div>
					<div style="clear: left;"></div>
				</div> -->
				<div class="dflex_vertical_c margin_r_40 margin_b_20">
					<div class="search_name">充值金额：</div>
					<el-input type="number" v-model="money" placeholder="请输入金额" class="search_input" clearable>
					</el-input>
				</div>
				<uni-text
					style=" color: rgb(144, 147, 153); animation-play-state: paused; animation-delay: 0s;"><span>注：单次充值不低于10元，平台充值后不支持退款，请根据业务使用量合理选择充值金额。</span></uni-text>
				<div style="text-align: center;margin-top: 20px;">
					<el-button size="mini" class="search-btn margin_b_20 margin_r_40" @click="paySubmit">确定</el-button>
					<el-button size="mini" @click="chongzhiClose">关闭</el-button>
				</div>
			</el-dialog>
			<el-dialog class="icon_dialog" width="60%" title="支付宝扫码" :visible.sync="payDialog" :append-to-body="true"
				v-dialogDrag>
				<div style="text-align: center;">
					<el-image style="width: 200px;height: 200px;padding: 1px;box-sizing: content-box;" :src="qrcode"
						fit="cover"></el-image>
				</div>
				<div style="text-align: center;margin-top: 20px;">
					<el-button size="mini" @click="payDialogClose">关闭</el-button>
				</div>
			</el-dialog>
		</div>

	</view>
</template>

<script>
	const db = uniCloud.database()
	const __name = 'wmz-entitlement-balance';
	let _this
	export default {
		data() {
			return {
				balance: 0,
				qrcode: "",
				payDialog: false,
				chongzhiDialog: false,
				advancedSearch: false,
				req: {
					page: 1,
					rows: 10,
					orderby: 'create_time desc',
					type: '',
					way: '',
					name: ''
				},
				tblHeight: 0,
				tableLoading: false,
				tableDatas: [],
				tableTotal: 0,
				selectDatas: [],
				searchBtnLoading: false,
				removesBtnLoading: false,
				sortLastTime: null,
				chongzhiData: [{
					text: "充10元",
					value: 10
				}, {
					text: "充50元",
					value: 50
				}, {
					text: "充100元",
					value: 100
				}, {
					text: "充500元",
					value: 500
				}],
				money: ''
			};
		},
		onLoad() {
			_this = this
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path);
			if (__search) {
				this.req = __search;
			}

			this.req.page = uni.getStorageSync('__paginationPage' + this.$route.path) || 1;
			this.req.rows = uni.getStorageSync('__paginationRows' + this.$route.path) || 10;

			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path);
				});
			});
			this.balanceGet()
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path);
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		},
		methods: {
			search() {
				this.req.page = 1;
				this.$api.storagePaginationPage(this.req.page, this.$route.path);
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path,
					data: this.req
				});
			},
			chongzhi() {
				this.chongzhiDialog = true
			},
			chongzhiClose() {
				this.chongzhiDialog = false
			},
			payDialogClose() {
				this.payDialog = false
				this.loadData();
				this.balanceGet()
			},
			selectMoney(item) {
				this.money = item.money
			},
			async balanceGet() {
				let res = await this.$func.wmzadmin.call('entitlement/balanceGet')
				if (res.code === 200) {
					this.balance = res.datas.data
				} else {
					this.$message.error(res.msg);
				}
			},
			async paySubmit() {
				if (this.money < 10) {
					alert("单次充值不低于10元")
					return
				}
				let res = await this.$func.wmzadmin.call('entitlement/balanceRecharge', {
					money: this.money
				})
				if (res.code === 200) {
					this.qrcode = res.datas.data
					this.chongzhiClose()
					this.payDialog = true
				} else {
					this.$message.error(res.msg);
				}
			},
			async loadData(clear = true) {
				this.tableLoading = true;

				await this.$db[__name]
					.whereif(this.req.type, {
						type: this.req.type
					})
					.whereif(this.req.name, {
						name: this.req.name
					})
					.whereif(this.req.way, {
						way: this.req.way
					})
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;

							if (typeof callback === 'function') {
								callback();
							}
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			currentChange(current) {
				this.$api.storagePaginationPage(current, this.$route.path);
				this.req.page = current;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			}
		}
	};
</script>